﻿@page "/scheduler/working-hours"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Calendars
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This demo showcases how to set the required working hours on Scheduler, thus visually highlighting the cells underlying the given work hour range.  </p> 
</SampleDescription>
<ActionDescription>
   <p> In this demo, the work hours are set by using the <code>WorkHours</code> property and it usually applies only on the working days defined for the Schedule. It can either be highlighted or not by defining the <code>Highlight</code>
        option within the <code>WorkHours</code> property. The working hour range can be defined by using the <code>Start</code> and <code>End</code> option available within the <code>WorkHours</code> property. </p>
   <p>To set discontinuous working hours on a day, then the default <code>WorkHours</code> on Scheduler needs to be disabled by setting false to
      <code>Highlight</code> option within it. Then, use the <code>SetWorkHours</code> method which accepts the days collection and the start & end hour values as parameters. </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" Width="100%" Height="650px" @bind-CurrentView="@CurrentView" @bind-SelectedDate="@CurrentDate" WorkDays="@WorkingDays">
            <ScheduleWorkHours Highlight="true" Start="@StartWorkingHours" End="@EndWorkingHours"></ScheduleWorkHours>
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView Option="View.WorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="2" Option="View.Month"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Work Start
                            </div>
                        </td>
                        <td style="width: 50%;">
                            <div>
                                <SfTimePicker TValue="DateTime?" Width="100px" Format="HH:mm" @bind-Value="@startTime">
                                    <TimePickerEvents TValue="DateTime?" ValueChange="StartWorkHours"></TimePickerEvents>
                                </SfTimePicker>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 30%">
                            <div>
                                Work End
                            </div>
                        </td>
                        <td style="width: 50%;">
                            <div>
                                <SfTimePicker TValue="DateTime?" Width="100px" Format="HH:mm" @bind-Value="@endTime">
                                    <TimePickerEvents TValue="DateTime?" ValueChange="EndWorkHours"></TimePickerEvents>
                                </SfTimePicker>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
@code{
    public View CurrentView = View.WorkWeek;
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetEmployeeEventData();
    static int[] WorkingDays = new int[] { 1, 3, 5 };
    private DateTime? startTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 8, 0, 0);
    private DateTime? endTime = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 20, 0, 0);
    public string StartWorkingHours = "08:00";
    public string EndWorkingHours = "20:00";
    public void StartWorkHours(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        this.StartWorkingHours = args.Text;
    }
    public void EndWorkHours(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        this.EndWorkingHours = args.Text;
    }
}